@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";
@import '@wordpress/base-styles/colors';

// We manually compose the UI of the dataview without including the view actions, which results in extra padding and a border.
.components-card__header + .components-card__body:has( > .dataviews-wrapper ):not( :has( .dataviews__view-actions ) ) {
	padding-top: 0;

	.dataviews-view-list div[role="row"]:first-child {
		border-top: none;
	}
}

// When displaying URLs in the DataViews, using the --wp-admin-theme-color link color is overwhelming.
// Using this class name, we override the link color with the text color.
a.dataviews-url-field {
	color: $gray-700;

	&:hover {
		color: var(--wp-admin-theme-color);
	}

	span {
		text-decoration: none;
	}
}

.dashboard-dataviews-empty-state {
	max-width: 480px;
	padding-block: $grid-unit-20;
	box-sizing: border-box;
}

.dashboard-dataviews-empty-state__heading {
	@include heading-x-large;
	color: $gray-900;
	margin: 0;
}

// Balanced wrapping works better for centered text
// Extra specificity to override <Text> component styles
.dashboard-dataviews-empty-state .dashboard-dataviews-empty-state__sub-heading {
	text-wrap: balance;
}

// Temporary overrides for the dataviews wrapper to match the new design system.
@media ( max-width: 782px ) { // Matches medium breakpoint from Core.
	.dataviews-filters__container,
	.dataviews-footer,
	.dataviews-view-grid,
	.dataviews-loading,
	.dataviews-no-results,
	.dataviews__view-actions,
	.dataviews-view-table tr td:first-child,
	.dataviews-view-table tr th:first-child,
	.dataviews-view-list div[role="row"] .dataviews-view-list__item-wrapper,
	.dataviews-view-list div[role="article"] .dataviews-view-list__item-wrapper {
		padding-inline: #{$grid-unit-20} !important;
	}
}
